<!--
 * @Description  : 
 * @Autor        : guoxi
 * @Date         : 2022-05-25 11:27:03
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-05-27 09:38:50
-->
<template>
  <!-- <div class="previe-image" v-if="info.isImage">
    <img :src="info.previeImage" />
  </div> -->
  <div
    v-if="isImg(route.query.fileName)"
    ref="preview"
    v-loading="info.loading"
    class="preview-box"
  ></div>
  <div v-else v-loading="info.loading" class="iframe-box">
    <!-- <i v-if="isEcm" class="download el-icon-download" @click="handleDownload" /> -->
    <!-- <el-icon class="close" @click="$router.go(-1)"><close /></el-icon>
    <el-icon class="download" @click="handleDownload"><document /></el-icon> -->
    <iframe
      ref="iframe"
      class="priview"
      :src="info.iframeSrc"
      frameborder="0"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
// import { download } from "/@/utils/download";
import { Base64 } from "js-base64";
import { isImg } from "/@/utils/is";
import { getAccToken } from "/@/utils/ecm";
import { storageLocal } from "/@/utils/storage";
declare var AnyShareSDKFactory;
//引入样式
const preview = ref(null);
const iframe = ref(null);
// import "highlight.js/styles/default.css";
const route = useRoute();
let info = reactive({
  iframeSrc: "",
  loading: true,
  previeImage: "",
  isImage: false
});

// const handleDownload = () => {
//   download({ uuidFile: route.query?.uuidFile, fileName: route.query.fileName });
// };
const isEcm = route.query.uuidFile.indexOf("gns") !== -1 ? true : false;
const initEcm = async () => {
  await getAccToken();
  if (isImageFilename(route.query.fileName)) {
    //插件预览方式
    info.loading = false;
    // const VITE_BASE_URL = import.meta.env.VITE_BASE_URL;
    // const ENV = import.meta.env.VITE_PROJECT_ENV;
    // const baseUrl = ENV === "pre" ? VITE_BASE_URL : window.location.origin;
    const sdk = await AnyShareSDKFactory.create({
      apiBase: `${location.origin}`,
      rootElement: preview.value,
      token: storageLocal.getItem("ecm-token"),
      locale: "zh-cn"
    });
    sdk.previewimg(
      {
        docid: route.query.uuidFile,
        name: route.query.fileName
      },
      false,
      false,
      { isShowActionMenuInSdk: true } //可选，是否展示操作菜单，默认为true
    );
  } else {
    //链接预览方式
    const VITE_ECM_URL = import.meta.env.VITE_ECM_URL;
    let previewType = isImageFilename(route.query.fileName)
      ? "zh-cn/previewimg"
      : "webfoxitreader";
    info.iframeSrc = `${VITE_ECM_URL}/anyshare/${previewType}?docid=${
      route.query.uuidFile
    }&tokenid=${storageLocal.getItem("ecm-token")}&name=${
      route.query.fileName
    }&isShowActionMenuInSdk=true`;
    iframe.value.onload = () => {
      info.loading = false;
    };
    // sdk.preview(
    //   {
    //     docid: route.query.uuidFile,
    //     name: route.query.fileName
    //     // size: 10116,
    //     // rev: "4DDDA5AB9DA14D808EBBA6A231F78FC1",
    //   },
    //   false,

    //   { isShowActionMenuInSdk: true } //可选，是否展示操作菜单，默认为true
    // );
  }
};

const isImageFilename = filename => {
  // 使用正则表达式判断文件名是否以图片格式结尾，忽略大小写
  var imageExtensions = /\.(jpg|jpeg|png|gif)$/i;
  return imageExtensions.test(filename);
};

onMounted(async () => {
  if (isEcm) {
    initEcm();
  } else {
    let url = `${
      import.meta.env.VITE_DOWNLOAD_URL
    }/rdms-admin/open/download?uuidFile=${route.query.uuidFile}&fullfilename=${
      route.query.fileName
    }`;
    if (isImg(route.query.fileName)) {
      url = `${
        import.meta.env.VITE_DOWNLOAD_IMAGE_URL
      }/rdms-admin/open/download?uuidFile=${
        route.query.uuidFile
      }&fullfilename=${route.query.fileName}`;
    }
    const previewUrl = import.meta.env.VITE_PREVIEW_URL;
    info.iframeSrc =
      previewUrl +
      "/onlinePreview?url=" +
      encodeURIComponent(Base64.encode(url));

    iframe.value.onload = () => {
      info.loading = false;
    };
  }
});
</script>

<style lang="scss" scoped>
.iframe-box {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.priview {
  width: 100%;
  height: 100%;
}

.close {
  position: absolute;
  font-size: 36px;
  color: #fff;
  right: 40px;
  top: 20px;
  cursor: pointer;
}

.download {
  position: absolute;
  font-size: 36px;
  color: #fff;
  right: 80px;
  top: 20px;
  cursor: pointer;
}

.preview-box {
  width: 100vw;
  height: 100vw;
}

::v-deep .as-components-preview-header-title {
  display: flex;
  align-items: center;
}

::v-deep .as-components-preview-header-box {
  display: flex;
  justify-content: space-between;
}

::v-deep .as-components-preview-header-icon {
  margin-right: 14px;
}

::v-deep .as-officeOnline-iframe {
  width: 100vw;
  height: 100vh;
}

.previe-image {
  text-align: center;
  margin-top: 100px;
}
</style>
